<template>
  <basic-dialog
    :fullscreen="true"
    :visible="visible"
    :title="'报价信息'"
    :handle-close="handleCancelQuote"
		:show-footer="false"
  >
    <div class="form-wrap">
      <el-form
        ref="quoteForm"
        :model="quoteForm"
        :rules="formValidate"
        label-width="130px"
      >
        <el-col :span="8">
          <el-form-item label="供应商名称：" prop="supplierName">
            <el-input v-model="quoteForm.supplierName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商代码：" prop="supplierCode">
            <el-input v-model="quoteForm.supplierCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运费承担方：" prop="freightPayer">
            <el-select
              v-model="quoteForm.freightPayer"
              style="width: 100%"
							disabled
            >
              <el-option
                v-for="option in freightBearerList"
                :key="option.sysTypeId"
                :value="option.sysTypeId"
                :label="option.sysTypeName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运费：" prop="freightPrice">
            <el-input
              v-model.trim="quoteForm.freightPrice"
              :maxlength="32"
              show-word-limit
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发票类型：" prop="invoiceType">
            <el-select
              v-model="quoteForm.invoiceType"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="option in invoiceTypeList"
                :key="option.sysTypeId"
                :value="option.sysTypeId"
                :label="option.sysTypeName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="税率：" prop="taxRate">
            <el-select
              v-model="quoteForm.taxRateStr"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="option in isEligibleSupplier() && isMulttaxRate
                  ? taxRate2ListObj
                  : taxrateArr"
                :key="option.sysTypeId"
                :value="option.sysTypeId"
                :label="option.sysTypeName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix quote-info-detail">
        <span>报价明细</span>
      </div>
      <div class="edit-table">
				<basic-list
					:loading="tableLoading"
					:tableHeight="450"
					:data-source= "sourcingSkuQuoteList"
					:columns="columns"
					:show-pagination="false"
					:showSelectCol="false"
				/>
      </div>
      <div class="footer">
        <div>
          <span>合计金额小写：{{ allSkuTotalPrice }}元</span>
        </div>
        <div>
          <span>合计金额大写：{{ allSkuTotalPriceStr }}</span>
        </div>
      </div>
    </el-card>
  </basic-dialog>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import BasicDialog from '../../../components/BasicDialog';
import BasicList from '../../../components/BasicList';
import * as bizUtil from '../../utils/index';

export default {
  name: 'QuoteDialog',
  components: {
    BasicDialog,
    BasicList
  },
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  data () {
    return {
      workableArrivalTime: '',
      deliveryDate: '',
      queryParams: {
        isEdit: '',
        pageType: '',
        sourcingBillId: '',
        isDemand: false
      },
      importBtnLoading: false,
      tableLoading: false,
      dataList: [],
      undertakerArr: bizUtil.UNDERTAKER_ARR,
      invoiceTypeArr: bizUtil.INVOICE_TYPE_ARR,
      formValidate: {
      },
      columns: []
    };
  },

  computed: {
    ...mapState('sourcing/purchaseDetail', {
      sourcingSkuQuoteList: (state) => state.sourcingSkuQuoteList,
      sourcingSupplierDto: (state) => state.sourcingSupplierDto,
      allSkuTotalPrice: (state) => state.allSkuTotalPrice, // 合计金额小写
      allSkuTotalPriceStr: (state) => state.allSkuTotalPriceStr, // 合计金额大写
      invoiceTypeList: (state) => state.invoiceTypeList, // 发票类型
      taxRateList: (state) => state.taxRateList, // 税率
      freightBearerList: (state) => state.freightBearerList, // 运费承担方
      addQuotationLoading: (state) => state.addQuotationLoading, // 提交报价loading
      computingCostsLoading: (state) => state.computingCostsLoading, // 运费分摊loading
      isMulttaxRate: (state) => state.isMulttaxRate, // 是否多计量
      taxRate2List: (state) => state.taxRate2List, // 多税率
      tmpQuotationLoading: (state) => state.tmpQuotationLoading // 暂存报价loading
    }),

    quoteForm () {
      return this.sourcingSupplierDto || {};
    },

    visible () {
      return this.dialogVisible;
    },

    taxrateArr () {
      return this.quoteForm.invoiceType == bizUtil.INVOICE_TYPE_SPECIAL_CODE
        ? this.taxRateList.slice(1, 10)
        : this.taxRateList.slice(0, 1);
    },

    fileParam () {
      return {
        sourceBillId: this.queryParams.sourcingBillId,
        sourceSupplierId: this.sourcingSkuQuoteList[0]
          ? this.sourcingSkuQuoteList[0].sourcingSupplierId
          : ''
      };
    },
    taxRate2ListObj () {
      return this.taxRateList.filter((item) => {
        return this.taxRate2List.includes(item.sysTypeId + '');
      });
    }
  },
  created () {
    const detailInfo = JSON.parse(sessionStorage.getItem('detailInfo'));
    this.queryParams = { ...detailInfo };
    if (this.queryParams.pageType === 1) {
      this.columns = bizUtil.QUOTE_COLUMNS_INQUERY;
    } else {
      this.columns = bizUtil.QUOTE_COLUMNS_ORDER;
    }
  },
  methods: {
    ...mapActions('sourcing/purchaseDetail', ['shareFreight']),

    shareFreightAction (data) {
      this.shareFreight({
        payload: {
          data
        }
      });
    },
    // 取消报价
    handleCancelQuote () {
      this.$emit('hide-handler');
    },
    // 是合格供应商
    isEligibleSupplier () {
      return (
        this.quoteForm.supplierStatus == bizUtil.SUPPLIER_QUALIFIED_STATUS_CODE
      );
    },
  }
};
</script>
<style lang='less' scoped>
.operating-area {
  float: right;
  .time-picker {
    color: #303133;
    display: inline;
    margin-right: 20px;
  }
}
.upload-quote {
  display: inline;
  margin-left: 10px;
}
.box-card {
  .quote-info-detail {
    line-height: 28px;
  }
}
.clear {
  clear: both;
}
.edit-table {
  margin: 20px 0;
}
.footer {
  span {
    font-size: 14px;
  }
}
.form-wrap:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}
</style>
